<template>
    <view class="container">
        <view>
            <desc-wrapper :title="title" :desc="desc"></desc-wrapper>
            <z-card>
                <view style="height: 36rpx"></view>
                <view style="margin: 0 100rpx">
                    <image class="w-full" src="@/static/image/taluopai/11@3x.png" mode="widthFix"></image>
                </view>
            </z-card>
            <view class="bottom-btns">
                <view class="start-btn" @click="onClick_1">
                    <text class="">洗牌占卜</text>
                </view>
            </view>
        </view>
        <u-tabbar :value="value1" @change="change1" inactive-color="#7C8491" activeColor="#275515" :fixed="true" :placeholder="false" :safeAreaInsetBottom="false">
            <u-tabbar-item v-for="(item, idx) in tabList" :text="item.labelText" @click="navigatorTo">
                <image class="u-page__item__slot-icon" slot="active-icon" :src="item.activeIconPath"></image>
                <image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
            </u-tabbar-item>
        </u-tabbar>
    </view>
</template>

<script>
export default {
    data() {
        return {
            title: '塔罗牌占卜',
            desc: '占卜方法：静默一分钟，心念集中于你所测之事，如爱情、事业、健康等，然后心念一动，点击立即洗牌。',
            value1: 1,
            tabList: [
                {
                    labelText: '首页',
                    url: '/pages/tabbar/home',
                    iconPath: '/static/image/tabbar/tabbar1.png',
                    activeIconPath: '/static/image/tabbar/activetabbar1.png'
                },
                {
                    labelText: '论坛',
                    url: '/pages/tabbar/forum',
                    iconPath: '/static/image/tabbar/tabbar2.png',
                    activeIconPath: '/static/image/tabbar/activetabbar2.png'

                    // activeIconPath: '/static/image/tabbar/activetabbar2.png'
                },
                {
                    labelText: '客服',
                    url: '/pages/tabbar/service',
                    iconPath: '/static/image/tabbar/tabbar3.png',
                    activeIconPath: '/static/image/tabbar/activetabbar3.png'
                },
                {
                    labelText: '我的',
                    url: '/pages/tabbar/mine',
                    iconPath: '/static/image/tabbar/tabbar4@3x.png',
                    activeIconPath: '/static/image/tabbar/activetabbar4@3x.png'
                }
            ]
        }
    },
    methods: {
        change1(e) {
            console.log(e)
            uni.switchTab({
                url: this.tabList[e].url
            })
        },
        navigatorTo({ index }) {},
        onClick_1() {
            const that = this
            uni.request({
                url: 'https://cs.appzdm.com:3000/Zhanbu/taluoxipai',
                method: 'POST',
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: {
                    taluo_spreads: 1
                },
                success: (res) => {
                    console.log(res.data.data)
                    uni.navigateTo({
                        url: `/pages/taluopai/detailone?params=${JSON.stringify(res.data.data)}`
                    })
                },
                fail: (error) => {
                    console.error('Request Failed:', error)
                }
            })
        }
    }
}
</script>

<style lang="scss">
::v-deep .u-page__item__slot-icon {
    margin-top: 10rpx;
}

::v-deep .u-tabbar-item__text {
    font-size: 20rpx;
    line-height: normal;
    margin-top: 3px;
}

.u-page__item__slot-icon {
    width: 48rpx;
    height: 48rpx;
}

// ::v-deep .card-wrapper {
//     transform: translateY(-90rpx) !important;
// }
</style>
